<template>
    <div class="sun">
      <el-popover
        ref="detail"
        placement="right-end"
        :offset="100"
        v-model="visible2">
        <div style="width: 300px;height: 400px;background-color: yellow;"></div>
      </el-popover>
      <button @click="sun">我是子按钮</button>
      {{num}}
      <slot></slot>
      <input type="checkbox" @change="listeners.input" :checked="checked" />
      <table>
          <template v-for="(list,index) of lists">
            <tr>
              <td>{{list}}</td>
            </tr>
            <tr>
              <td>{{list}}</td>
            </tr>
          </template>
      </table>
      <div class="ff-flex" @click="visible2 = true" v-popover:detail>
        <div class="ff-flex1"></div>
        <div class="ff-flex2"></div>
        <div class="ff-flex3"></div>
      </div>
      <button @click="csK">测试三层sync</button>
    </div>
</template>
<style lang="less" scoped>
  .sun {
    .ff-flex {
      position: relative;
      display: flex;
      overflow-x: auto;
      overflow-y: hidden;
      flex-direction: column;
      height: 300px;
      width: 300px;
      .ff-flex1 {
        height: 30px;
        background-color: #ccc;
      }
      .ff-flex2 {
        position: relative;
        flex: 1;
        background-color: green;
        width: 200%;
      }
      .ff-flex3 {
        position: relative;
        flex: 1;
        background-color: yellow;
      }
    }
  }
</style>
<script>
  export default {
    model: {
      prop: 'checked',
      event: 'input'
    },
    props: {
      show: Boolean,
      ShowName: String,
      mm: Function,
      demo: Number,
      deld: {},
      checked: Boolean,
      arr: Array,
      syncCS: Boolean
    },
    inheritAttrs:false,
    data () {
      return {
        lists: [1,2,3],
        visible2: false
      }
    },
    computed: {
      num: {
        get () {
          console.log(33333)
          return this.demo
        },
        set (val) {
          console.log(val)
        }
      },
      listeners() {
        return {
          ...this.$listeners,
          input: (event) =>{
            console.log(this)
            this.$emit('input', event.target.checked)
          }
        }
      }
    },
    methods: {
      csK () {
        this.$emit('update:syncCS', true)
      },
      sun () {
        this.$emit('list-show',false);
        this.$emit('mit',88)
      },
      next () {
        console.log('next')
      },
      prev () {
        console.log('prev')
      }
    },
    watch: {
      mm (a,b) {
        console.log(a,b)
        console.log(55555)
      },
      'arr.length' () {
        console.log('asdasdsd')
      }
    },
    mounted() {
      this.$on('next',() => {
        this.next()
      })//添加监听事件
      this.$on('prev',() => {
        this.prev()
      })//添加监听事件
      console.log(this.$listeners)
      console.log(this.$attrs)
      /*console.log(this.mm())*/
      /*console.log(this.ShowName)*/
    }
  }
</script>
